<!DOCTYPE html>
<html>
<head>
    <title>Orientation</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    <script type="text/javascript" language="javascript">

       function loadHandler()
       {
           document.getElementById("load").innerHTML = getOrientationString();
       }
			 function unloadHandler() {}
       function orientHandler()
       {
           document.getElementById("orient").innerHTML = getOrientationString();
       }
       function resizeHandler()
       {
           document.getElementById("resize").innerHTML = getOrientationString();
       }
       function manualHandler()
       {
            document.getElementById("manual").innerHTML =  getOrientationString();
       }
      
       function getOrientationString()
       {
           var displayStr = "";

           switch(window.orientation)
           {
               case 0:
                   displayStr += "0 (Portrait)";
               break;

               case -90:
                   displayStr += "-90 (Landscape)";
               break;

               case 90:
                   displayStr += "90 (Landscape)";
               break;

               case 180:
                   displayStr += "180 (Portrait - upside down - SHOULD NEVER HAPPEN!)";
               break;
               
               default:
                    displayStr += "unsupported";
               break;

           }
           return displayStr;
       }

    </script>
</head>
<body onload="loadHandler();" onunload="unloadHandler();" onresize="resizeHandler();" onorientationchange="orientHandler();">

	<h2 style="text-decoration: underline;">Tracking Orientation</h2>
	Load Events: <span id="load">unknown</span><br/>
	Resize Events: <span id="resize">unknown</span><br/>
	Orient Events: <span id="orient">unknown</span><br/>
	Manual State:  <span id="manual">unknown</span><br/>
	<a href="static.html">link out</a><br/>
	<a href="javascript:manualHandler()">Read window.orientation</a>

</body>
</html>